<template>
  <div>
    <h1>{{count}}</h1>
    <button @click = "count++">累加</button>
    <button @click = "remove">卸载</button>
  </div>
</template>

<script>
export default {
  name: "App",
  data(){
    return{
      count: 1
    }
  },
  methods:{
    remove(){
      //卸载组件
      this.$destroy()
    }
  },

  //new Vue之后, 先初始化了事件系统和生命周期系统 数据等还没有放在实例上


  //1.数据创建之前 不能访问data中的数据 methods中的方法 但是可以添加属性和方法
  beforeCreate(){
    console.log(this);
    // debugger
    this.aaa = "老六"
    this.testFn = function (){
    }
  },


  //2.数据创建之后 可以访问到data中的数据 methods中的方法
  created(){
    console.log(this);
    console.log(this.aaa);
    console.log(this.testFn);
    debugger
  },


  //3.挂载之前(把虚拟Dom转化为真实Dom插入到页面之前) 这个阶段的Dom没有经过Vue编译不能操作
  beforeMount(){
    debugger
  },

  //4.挂载之后(Vue根据虚拟Dom创建了真实Dom并直接替换了el容器) 
    //这个阶段浏览器展示的是真实Dom我们会做所有的初始化操作(开启定时器,发送初始化请求,发起订阅,绑定自定义事件等等...)
  mounted(){
    debugger
  },


  //5.更新之前: 修改数据触发 数据更新了 视图还没有更新
  beforeUpdate(){

  },

  //6.更新之后: 此时数据和视图保持一致
  updated(){

  },

  //7.卸载之前 当组件收到销毁的指令时,会调用beforeDestroy钩子函数
    //在当前生命周期中,使用功能都是正常的，但是最好不要修改数据!!!
    //在这个生命周期函数中一般来处理收尾的工作(关闭定时器,取消订阅,解绑自定义事件等等)
  beforeDestroy(){

  },

  //8.卸载之后 Vue取消了数据双向绑定 并且把子组件内的事件都卸载
    //原生Dom事件依然有效
  destroyed(){

  },




  /*
                          new Vue()
 
                初始化事件系统和生命周期系统 数据等还没放在实例上

        1.beforeCreate()创建数据之前： 访问不到data的数据和methods的方法

                   _data数据创建 数据代理 数据劫持的创建

       2.created()创建数据之后： 可以访问到data的数据和methods的方法


                        有没有el容器  No--------
                              |               |
                              |               |
                              V               V
                             Yes          $.mount()挂载到容器
                          
                      有没有模板temptate

       根组件有模板就替换调容器               根组件没有模板就把容器作为模板



                 3.beforMount()挂载之前： 不能操作Dom         

                      把虚拟Dom转为真实Dom插入页面

4.mounted()挂载之后： 页面是真实Dom 这个阶段一般做所有地初始化操作(开启定时器 初始化请求 发布订阅...) 



              5.beforUpdate()更新之前： 数据更新了 视图没更新

                            更新阶段

              6.updated()更新之后: 数据和视图保持一致了



7.beforDestroy()卸载前 : 功能都能用 不建议修改数据 这个阶段一般做收尾工作(关闭定时器,取消订阅...)

                               卸载
                    
      8.destroyed()卸载之后: 取消数据双向绑定 并且把子组件内部的事件等等都拆卸掉了 

*/


}
</script>

<style>

</style>